<template>
  <div>
    <img :src="$pre + detail.img" alt="" />
    <div>名称：{{ detail.goodsname }}</div>
    <!--在数据请回来之前，调用filterPrice会报错，所以等数据回来了之后再渲染 -->
    <div v-if="detail.price">价格：{{ detail.price | filterPrice }}</div>
    
    <div v-html="detail.description"></div>
    <v-picker v-if="isshow" :detail="detail" @hide="isshow = false"></v-picker>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/index/shop" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="isshow = true"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import vPicker from "./components/vPicker.vue";
import { reqDetail } from "../../http/http";
export default {
  components: {
    vPicker,
  },
  data() {
    return {
      detail: {},
      isshow: false,
    };
  },
  activated() {
    reqDetail(this.$route.params.id).then((res) => {
      // console.log(res);
      this.detail = res.data.list[0];
      this.detail.specsattr = this.detail.specsattr.split(",");
      // console.log(this.detail.specsattr);
    });
  },
};
</script>

<style>
img {
  width: 100vw;
}
</style>